<template>
  <view v-if="goodsInfo" class="goods_detail">
    <u-swiper
      :list="goodsInfo.pics"
      name="pics_big"
      :height="498"
      img-mode="aspectFit"
      bg-color="#fff"
      @click="handlePreviewImage"
    ></u-swiper>
    <view class="goods_Info">
      <view class="goods_main">
        <view class="goods_price">
          <text>￥</text>{{ goodsInfo.goods_price }}</view
        >
        <view></view>
      </view>
      <view class="goods_name u-line-2 u-m-b-30">{{ goodsInfo.goods_name }}</view>
    </view>
    <u-line color="#ccc"/>
    <u-line color="#ccc"/>
    <u-line color="#ccc"/>
    <u-line color="#ccc"/>
    <u-line color="#ccc"/>

    <view class="detailImg">
      <view class="u-m-20 u-text-center">图片详情</view>
      <u-parse :html="goodsInfo.goods_introduce"></u-parse>
    </view>

<!-- 底部提交订单 -->
    <view class="navigation">
		<view class="left">
			<view class="item">
				<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">联系客服</view>
			</view>
			<navigator  url="/pages/cart/cart"  open-type="switchTab" class="item car">
				<u-badge class="car-num" :count="cartSum" type="error" :offset="[-3, -6]"></u-badge>
				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view  class="text u-line-1">购物车</view>
			</navigator>
		</view>
		<view class="right">
			<view class="cart btn u-line-1" @click="handlePushCart">加入购物车</view>
			<view class="buy btn u-line-1">立即购买</view>
		</view>
	</view>
  </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      goodsInfo: '',
    };
  },
  // onLoad({goods_id = 43986}){
  async onLoad(option) {
    // console.log(option)
    // 结构并加默认值
    const { goods_id = 43986 } = option;

    const res = await this.$u.get("/goods/detail", { goods_id });
    // console.log(res)
    this.goodsInfo = res.message;
  },

  computed:{
    ...mapState({
      cartList: state => state.cartList,
    }),

    cartSum(){
      if(this.cartList.length<=0) return 0
     return this.cartList.reduce((prev,v)=>prev+=v.num,0)
    }
  },
  methods: {
    // 加入购物车
    handlePushCart(){
      // console.log(this.cartSum)
      // console.log(this.cartList)
      let newList = [...this.cartList]
      let index = newList.findIndex(item=>this.goodsInfo.goods_id===item.goods_id)
      // console.log(index)
      if(index !== -1){
        newList[index].num++
      }else{
        newList.push({
        ...this.goodsInfo,
        checked:true,
        num:1
      })
      }
      this.$store.commit("setCartList",newList) 
      //
     

    },

    // 点击轮播图触发
    handlePreviewImage(index) {
      const urls = this.goodsInfo.pics.map((pics) => pics.pics_big);
      const current = index;
      // console.log(urls)
      // 全屏预览图片
      uni.previewImage({ urls, current });
    },
  },
};
</script>

<style lang="scss" scoped>
.goods_detail {
  .goods_Info {
    padding: 0 33rpx;
    .goods_main {
      margin: 19rpx 0;
      .goods_price {
        color: $theme-color;
        font-size: 36rpx;
        font-weight: 600;
        text{
          font-size: 30rpx;
        }
      }
    }
    .goods_name{
      
    }
  }
}
.navigation {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	.left {
		display: flex;
		font-size: 20rpx;
    justify-content: space-evenly;
    width: 40%;
		.item {
      text-align: center;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
</style>